<style>
    .layui-form-label {
        width: 100px;
    }
    .layui-input-block {
        margin-left: 130px;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label">报废时间：</label>
                                    <div class="layui-input-inline">
                                        <input name="createTime" id="pTime" class="layui-input" type="text"
                                               placeholder="选择时间" autocomplete="off" style="width: 200px" readonly/>
                                    </div>
                                    <input name="startTime" id="startTime" type="hidden"/>
                                    <input name="endTime" id="endTime" type="hidden"/>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">柜子编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="cabCode" class="layui-input" type="text" placeholder="请输入柜子编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="请输入物料编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">部门：</label>
                                    <div class="layui-input-inline">
                                        <select name="departmentId" lay-filter="departmentId" lay-search="" class="common-select-search"></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">操作人：</label>
                                    <div class="layui-input-inline">
                                        <select name="creatorId" lay-search="" class="common-select-search">
                                            <option value="">请选择操作人</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="storageInventoryInoutBtnExport" class="layui-btn icon-btn color-green">导出
                            </button>
                        </div>
                        <div class="lay-btn-rt">

                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="storageInventoryInoutTable" lay-filter="storageInventoryInoutTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="storageInventoryInoutTableBar">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>-->
    <!--
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    -->
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="storageInventoryInoutForm">
    <form lay-filter="storageInventoryInoutForm" class="layui-form model-form form-scroll">
        <div class="open-details-box pd-20 is-detail">
            <input name="id" type="hidden"/>
            <div class="color-title" style="margin: 15px 0;">回收单信息</div>
            <div class="layui-form-item">
                <div class="layui-col-md4">
                    <label class="layui-form-label">回收订单编号</label>
                    <div class="layui-input-block">
                        <input name="code" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">订单创建时间</label>
                    <div class="layui-input-block">
                        <input name="createTime" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">回收员</label>
                    <div class="layui-input-block">
                        <input name="takeUserName" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md4">
                    <label class="layui-form-label">取货时间</label>
                    <div class="layui-input-block">
                        <input name="takeTime" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">回收订单状态</label>
                    <div class="layui-input-block">
                        <input name="statusDesc" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="color-title" style="margin: 15px 0;">设备信息</div>
            <div class="layui-form-item">
                <div class="layui-col-md4">
                    <label class="layui-form-label">所属企业</label>
                    <div class="layui-input-block">
                        <input name="enterpriseName" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">所属车间</label>
                    <div class="layui-input-block">
                        <input name="workshopName" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">车间描述</label>
                    <div class="layui-input-block">
                        <input name="workshopDesc" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md4">
                    <label class="layui-form-label">所属柜子</label>
                    <div class="layui-input-block">
                        <input name="cabName" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">所属货位</label>
                    <div class="layui-input-block">
                        <input name="spaceCode" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="color-title" style="margin: 15px 0;">物料信息</div>
            <table class="layui-table" id="storageInventoryInoutDetailTable" lay-filter="storageInventoryInoutDetailTable"></table>
        </div>
        <div class="layui-form-item text-right pd-20" >
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;

        admin.selectSearch();
        // 渲染表格
        var insTb = table.render({
            elem: '#storageInventoryInoutTable',
            url: config.base + 'enterprisecab/cabinet/admin/storageRecycleInventoryIn/list',
            // url: config.base + 'enterprisecab/cabinet/admin/storageInventoryCheck/list?status=created&businessType=recycle',
            toolbar: true,
            defaultToolbar: ["filter"],
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                ,{field: 'skuName', sort: true, title: '物料名称', fixed: 'left', width: 160}
                ,{field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                ,{field: 'skuSpecOld', sort: true, title: '规格码', fixed: 'left', width: 160}
                ,{field: 'productBrandName', sort: true, title: '品牌'}
                ,{field: 'code', sort: true, title: '报废编号', width: 160}
                , {field: 'departmentName', sort: false, title: '部门'}
                , {field: 'costCenter', sort: false, title: '成本中心'}
                // ,{field: 'inType', sort: true, title: '存入方式',templet:function (d) {
                //         return '报废';
                //     }}
                ,{field: 'cabCode', title: '柜子编号', width: 130}
                ,{field: 'spaceCode', title: '货位编号'}
                ,{field: 'packName', title: '包装规格'}
                ,{field: 'quantity', title: '数量(包装计)'}
                ,{field: 'unitName', title: '包装单位'}
                ,{field: 'quantityPack', title: '数量(基础单位计)'}
                ,{field: 'basicsUnitName', title: '基础单位'}
                ,{field: 'deviceCode', sort: true, title: '机台'}
                ,{field: 'labelCode', title: '刀具条码', width: 130}
                ,{field: 'remainingTime', title: '刀具寿命',templet:function (d) {
                        if(d.lifeUnitDesc==''){
                            return '不计寿命';
                        }
                        return d.remainingTime+'|'+d.settingTime;
                    }}
                ,{field: 'lifeUnitDesc', title: '寿命单位', templet:d=> d.lifeUnitDesc ? d.lifeUnitDesc : '无'}
                ,{field: 'causeName', title: '报废原因'}
                ,{field: 'creatorName', sort: true, title: '报废人', width: 110}
                ,{field: 'createTime', sort: true, title: '报废时间', width: 160}
                // ,{field: 'isCheck', sort: true, title: '是否盘验',templet:function (d) {
                //         if(d.status=='checked'){
                //             return '是';
                //         }
                //         return  '否';
                //     }}
                // ,{field: 'status', sort: true, title: '盘验状态',templet:function (d) {
                //         if(d.status=='created'){
                //             return '待盘验'
                //         }
                //         return  '已盘验'
                //     }}
                // ,{field: 'no', sort: true, title: 'no'}
                // ,{field: 'day', sort: true, title: 'day'}
                // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                // ,{field: 'statusDesc', sort: true, title: '状态'}
                // ,{field: 'checkTime', sort: true, title: '盘验时间'}
                // ,{field: 'checkUserId', sort: true, title: '盘验人id'}
                // ,{field: 'checkUserName', sort: true, title: '盘验人'}
                // ,{field: 'notifyTime', sort: true, title: '通知时间'}
                // ,{field: 'notifyUserId', sort: true, title: '通知人'}
                // ,{field: 'notifyUserName', sort: true, title: '通知人'}
                // ,{field: 'takeUserId', sort: true, title: '回收人id'}
                // ,{field: 'takeUserName', sort: true, title: '回收人'}
                // ,{field: 'takeTime', sort: true, title: '回收时间'}
                // ,{field: 'inoutId', sort: true, title: '暂存柜存刀id'}
                // ,{field: 'cabId', sort: true, title: '柜子id'}
                // ,{field: 'skuId', sort: true, title: 'sku id'}
                // ,{field: 'companyId', sort: true, title: '企业id'}
                // ,{field: 'spaceId', sort: true, title: '货道id'}
                // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                // ,{field: 'quantityCurrent', sort: true, title: '当前库存'}
                // ,{field: 'quantityAfter', sort: true, title: '变动后库存'}

                // ,{align: 'center', toolbar: '#storageInventoryInoutTableBar', title: '操作', width: 80}
            ]],
            done: function (res, curr, count) {
                //移除按钮
                var menuButton = config.getMenuButton(location.hash);
                if(menuButton.indexOf("搜索") == -1){
                    $('.layui-form.toolbar').remove();
                }
                if(menuButton.indexOf("修改") == -1){
                    $("[lay-event='edit']").remove();
                }
                if(menuButton.indexOf("删除") == -1){
                    $("[lay-event='del']").remove();
                }
            }
        });

        // 工具条点击事件
        table.on('tool(storageInventoryInoutTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            }else if(obj.event=='detail'){
                admin.req('enterprisecab/cabinet/admin/storageInventoryCheck/detail/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        showEditModel(res.data);
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'GET');

            }
        });

        //监听排序
        table.on('sort(storageInventoryInoutTable)', function(obj){
            table.reload('storageInventoryInoutTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
            // loadReportSelectHtml([],'请选操作人','creatorId',2,'.lay-header');
            selectManager();
        });

        // 部门
        admin.req('user/admin/department/list', {limit:9999}, res => {
            if (res.code == 200){
                loadReportSelectHtml(res.data,'请选择部门','departmentId',1,'.lay-header')
            }else {
                loadReportSelectHtml([],'请选择部门','departmentId',1,'.lay-header')
            }
        });

        //部门操作
        form.on('select(departmentId)',function(data){
            selectManager(data.value);
        });

        selectManager();

        // 操作人
        function selectManager(_data) {
            admin.req('user/admin/user/list', {limit:9999, departmentId:_data}, res => {
                if (res.code == 200){
                    loadReportSelectHtml(res.data,'请选择操作人','creatorId',3,'.lay-header')
                }else {
                    loadReportSelectHtml([],'请选择操作人','creatorId',3,'.lay-header')
                }
            });
        }

        // 添加按钮点击事件
        $('#storageInventoryInoutBtnAdd').click(function () {
            showEditModel();
        });

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: ['1280px', '800px'],
                offset: '65px',
                title: '详情',
                content: $('#storageInventoryInoutForm').html(),
                success: function () {

                    $(".model-form input").css("border","none")
                    $(".model-form input").attr('readonly',true);
                    if (data){
                        var option = $("form select[name='operationType']").find("option");
                        layui.each(option, function(index, item){
                            if(data.operationType  == item.text){
                                data.operationType = item.value;
                            }
                        });
                    }

                    if (data){
                        var option = $("form select[name='businessType']").find("option");
                        layui.each(option, function(index, item){
                            if(data.businessType  == item.text){
                                data.businessType = item.value;
                            }
                        });
                    }

                    if (data){
                        var option = $("form select[name='status']").find("option");
                        layui.each(option, function(index, item){
                            if(data.status  == item.text){
                                data.status = item.value;
                            }
                        });
                    }

                    var insTb = table.render({
                        elem: '#storageInventoryInoutDetailTable',
                        url: config.base + 'enterprisecab/cabinet/admin/storageInventoryCheckDetail/list?checkId='+data.id,
                        page: true,
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'numbers'}

                            ,{field: 'spaceCode', sort: true, title: '所属货位'}
                            ,{field: 'skuPic', sort: true, title: '物料图片',templet:function (d) {
                                    if(d.skuPic){
                                        return '<img src="'+ d.skuPic +'" style="height: 20px;"/>';
                                    }
                                    return '';
                                }}
                            ,{field: 'skuCode', sort: true, title: '物料编号'}
                            ,{field: 'skuName', sort: true, title: '物料名称'}
                            ,{field: 'skuSpec', sort: true, title: '规格'}
                            ,{field: 'productBrandName', sort: true, title: '品牌'}
                            ,{field: 'quantity', sort: true, title: '数量'}
                            ,{field: 'checkCode', sort: true, title: '盘验编号'}
                            ,{field: 'checkTime', sort: true, title: '盘验时间'}

                        ]],
                        done: function (res, curr, count) {
                            //移除按钮
                            var menuButton = config.getMenuButton(location.hash);
                            if(menuButton.indexOf("搜索") == -1){
                                $('.layui-form.toolbar').remove();
                            }
                            if(menuButton.indexOf("修改") == -1){
                                $("[lay-event='edit']").remove();
                            }
                            if(menuButton.indexOf("删除") == -1){
                                $("[lay-event='del']").remove();
                            }
                        }
                    });

                    form.val('storageInventoryInoutForm', data);
                    // 表单提交事件
                    form.on('submit(storageInventoryInoutFormSubmit)', function (d) {
                        layer.load(2);
                        admin.req(data ? 'enterprisecab/cabinet/admin/storageInventoryInout/update' : 'enterprisecab/cabinet/admin/storageInventoryInout/add', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('storageInventoryInoutTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');
                        return false;
                    });
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/cabinet/admin/storageInventoryInout/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        //时间范围
        laydate.render({
            elem: '#pTime',
            type: 'date',
            range: true,
            done: function (value, date, endDate) {
                if (value){
                    let dateValue = value.split(" - ");
                    $("#startTime").val(dateValue[0] + " 00:00:00");
                    $("#endTime").val(dateValue[1] + " 23:59:59");
                }else {
                    $("#startTime").val("");
                    $("#endTime").val("");
                }
                setTimeout(function() {$('[lay-filter="formSubSearchLog"]').click()}, 300);
            }
        });

        // 导出
        $('#storageInventoryInoutBtnExport').click(function () {
            var sTime = $('#startTime').val();
            var eTime = $('#endTime').val();

            if (sTime == "" && eTime == ""){
                layer.msg('请先选择报废时间！')
            } else {

                location.href = config.base + 'enterprisecab/cabinet/admin/storageScrapInventoryIn/export?startCreateTime='+sTime+'&endCreateTime='+eTime;
            }
        });

        // 渲染下拉框
        function loadReportSelectHtml(data, tips, htmltarget, type, parentName) {
            let html = ' <option value="">' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                if (type == 1) {
                    html += `<option value='${data[i].id}'>${data[i].name}</option>`;
                } else if (type == 2) {
                    html += `<option value='${data[i].id}'>${data[i].username}</option>`;
                }else if (type == 3) {
                    html += `<option value='${data[i].id}'>${data[i].nickname+"|"+data[i].username}</option>`;
                }
            }
            $(parentName).find("select[name='" + htmltarget + "']").html(html);
            form.render('select');
        }
    });
</script>